.<template>
  <div class="echarts">
    <div ref="myChart" :style="{width:  '100%', height: '300px'}"></div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/grid')
require('echarts/lib/component/dataZoom')

export default {
  props: {
    title: {
      type: String,
    },
    xD: {
      type: Array,
    },
    yD: {
      type: Array,
    },
    sD: {
      type: Array,
    },
  },

  watch: {
    xD: function (val) {
      this.xd = val
      this.initEcharts()
    },
    yD: function (val) {
      this.yd = val
      this.initEcharts()
    },
    sD: function (val) {
      this.sd = val
      this.initEcharts()
    },
  },

  data() {
    return {
      xd: this.xD,
      sd: this.sD,
      yd: this.yD,
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    formatterTipLine(params, unit, color) {
      //这里要根据实际传来的值，进行后面的逻辑操作。
      //有时候传进来的可能不是一个对象
      var tip = ''
      var colorIn = color ? color : '#446AA9'
      tip =
        tip +
        '<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:' +
        colorIn +
        ';"></span>'
      tip =
        tip +
        '<span>' +
        params.name +
        ':</span>' +
        '<span style="font-weight:blod">' +
        params.data +
        '</span>'
      return tip
    },
    initEcharts() {
      let myChart = echarts.init(this.$refs.myChart)

      let yMax = 500
      let dataShadow = []
      for (let i = 0; i < this.sd.length; i++) {
        dataShadow.push(yMax)
      }
      var that = this
      let option2 = {
        tooltip: {
          formatter: function (params) {
            //提示框自定义
            console.log(params)
            return that.formatterTipLine(params, '%', '#f9d546')
          },
        },
        title: {
          text: this.title,
          subtext: '所有数据均是来自后台时实时统计',
        },
        xAxis: {
          data: this.xd,
          axisLabel: {
            inside: true,
            color: '#fff',
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#999',
          },
        },
        dataZoom: [
          {
            type: 'inside',
          },
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' },
                ]),
              },
            },
            data: this.sd,
          },
        ],
      }

      option2 && myChart.setOption(option2)

      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
  },
}
</script>

<style>
</style>